<template>
  <div class='app-container'>
    <div class="top">
      <el-steps :active="orderDetailData?.deleteStatus" align-center finish-status="success">
        <el-step title="提交订单" :description="dayjs(orderDetailData?.createTime).format('YYYY-MM-DD HH:mm:ss')" />
        <el-step title="支付订单" />
        <el-step title="平台发货" />
        <el-step title="确认收货" />
        <el-step title="完成评价" />
      </el-steps>
    </div>

    <!-- msg -->
    <div class="msg">
      <div class="msg_top">
        <div class="left">
          <el-icon>
            <WarningFilled />
          </el-icon>
          <div>当前状态：</div>
          <div>{{ orderDetailData?.status === 0 ? "待付款" : "已关闭" }}</div>
        </div>
        <div class="right" v-if="orderDetailData?.status !== 0">
          <el-button size="small" @click="deleteOrder">删除订单</el-button> <el-button size="small"
            @click="openVisiables">备注订单</el-button>
        </div>
        <div class="right" v-if="orderDetailData?.status === 0">
          <el-button size="small" @click="openUpdateRecevierInfo">修改收货人信息</el-button> <el-button
            size="small">修改商品信息</el-button>
          <el-button size="small" @click="openUpdateMonetyInfo">修改费用信息</el-button> <el-button size="small"
            @click="openSendDlg">发送站内信</el-button>
          <el-button size="small" @click="openCloseOrderVisiable">关闭订单</el-button> <el-button size="small"
            @click="openVisiables">备注订单</el-button>
        </div>
      </div>
      <div class="importants">
        <div style="display: flex;align-items: center;margin-bottom: 8px;">
          <el-icon>
            <Briefcase />
          </el-icon>
          <div>基本信息</div>
        </div>
        <el-descriptions direction="vertical" size="large" :column="6" border>
          <el-descriptions-item label="订单编号" align="center">{{ orderDetailData?.orderSn }}</el-descriptions-item>
          <el-descriptions-item label="发单流水" align="center">暂无</el-descriptions-item>
          <el-descriptions-item label="用户账号" align="center">{{ orderDetailData?.memberUsername }}</el-descriptions-item>
          <el-descriptions-item label="支付方式" align="center">
            {{ orderDetailData?.payType === 0 ? "未支付" : "支付宝" }}
          </el-descriptions-item>
          <el-descriptions-item label="订单来源" align="center">{{ orderDetailData?.sourceType === 1 ? "APP订单" : "小程序" }}
          </el-descriptions-item>
          <el-descriptions-item label="订单类型" align="center">{{ orderDetailData?.orderType === 0 ? "正常订单" : "异常订单" }}
          </el-descriptions-item>
          <el-descriptions-item label="配送方式" align="center">暂无
          </el-descriptions-item>
          <el-descriptions-item label="物流单号" align="center">{{ orderDetailData?.deliverySn ? orderDetailData?.deliverySn
            : "暂无" }}
          </el-descriptions-item>
          <el-descriptions-item label="自动收货时间" align="center">15天
          </el-descriptions-item>
          <el-descriptions-item label="订单可得优币" align="center">{{ orderDetailData?.growth }}
          </el-descriptions-item>
          <el-descriptions-item label="订单可得值" align="center">{{ orderDetailData?.growth }}
          </el-descriptions-item>
          <el-descriptions-item label="活动信息" align="center">
            <div style="width:70px; overflow: hidden; white-space: nowrap;">{{
              orderDetailData?.promotionInfo }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 收货人信息 -->
      <div class="returnPeoper">
        <div style="display: flex;align-items: center;margin-bottom: 8px;">
          <el-icon>
            <Briefcase />
          </el-icon>
          <div>收货人信息</div>
        </div>
        <el-descriptions direction="vertical" size="large" :column="4" border>
          <el-descriptions-item label="收货人" align="center">{{ orderDetailData?.receiverName }}</el-descriptions-item>
          <el-descriptions-item label="手机号码" align="center">{{ orderDetailData?.receiverPhone }}</el-descriptions-item>
          <el-descriptions-item label="邮政编码" align="center">{{ orderDetailData?.receiverPostCode }}</el-descriptions-item>
          <el-descriptions-item label="收货地址" align="center"><span>{{ orderDetailData?.receiverProvince }}</span>
            <span>{{ orderDetailData?.receiverCity }}</span>
            <span>{{ orderDetailData?.receiverRegion }}</span>
            <span>{{ orderDetailData?.receiverDetailAddress }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 商品信息 -->
      <div class="products" v-if="orderDetailData">
        <div style="display: flex;align-items: center;margin-bottom: 8px;">
          <el-icon>
            <Briefcase />
          </el-icon>
          <div>商品信息</div>
        </div>
        <el-table v-if="orderDetailData" :data="orderDetailData?.orderItemList" border style="width: 100%">
          <el-table-column prop="productPic" label="商品图片">
            <template #default="{ row }">
              <img class="imgs" :src="row.productPic" alt="">
            </template>
          </el-table-column>
          <el-table-column label="商品名称">
            <template #default="{ row }">
              <div>{{ row.productName }}</div>
              <div>品牌：{{ row.productBrand }}</div>
            </template>
          </el-table-column>
          <el-table-column label="价格/货号">
            <template #default="{ row }">
              <div>价格：￥{{ row.productPrice }}</div>
              <div>货号：{{ row.productSn }}</div>
            </template>
          </el-table-column>
          <el-table-column label="属性">
            <template #default="{ row }">
              <div v-for="item in JSON.parse(row.productAttr)">
                {{ item['key'] }}:{{ item['value'] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="productQuantity" label="数量" />
          <el-table-column prop="productPrice" label="小计">
            <template #default="{ row }">
              <div>￥{{ row.productPrice * row.productQuantity }}</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right;">合计：<span class="price">￥{{ orderDetailData?.orderItemList ? productsTotal : 0
        }}</span>
        </div>
      </div>

      <!-- 费用信息 -->
      <div class="cost">
        <div style="display: flex;align-items: center;margin-bottom: 8px;">
          <el-icon>
            <Briefcase />
          </el-icon>
          <div>费用信息</div>
        </div>
        <el-descriptions direction="vertical" size="large" :column="4" border>
          <el-descriptions-item label="商品合计" align="center">￥{{ orderDetailData?.totalAmount }}</el-descriptions-item>
          <el-descriptions-item label="运费" align="center">￥{{ orderDetailData?.freightAmount }}</el-descriptions-item>
          <el-descriptions-item label="优惠券" align="center">-￥{{ orderDetailData?.couponAmount }}</el-descriptions-item>
          <el-descriptions-item label="积分抵扣" align="center">-￥{{ orderDetailData?.integrationAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="活动优惠" align="center">-￥{{ orderDetailData?.promotionAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="折扣金额" align="center">-￥{{ orderDetailData?.discountAmount }}</el-descriptions-item>
          <el-descriptions-item label="订单总金额" align="center">
            <div style="color: #f40;">￥{{ orderDetailData?.totalAmount
            }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="应付款金额" align="center">
            <div style="color: #f40;">￥{{ orderDetailData?.payAmount
            }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 操作信息 -->
      <div class="caozuo">
        <div style="display: flex;align-items: center;margin-bottom: 8px;">
          <el-icon>
            <Briefcase />
          </el-icon>
          <div>操作信息</div>
        </div>
        <el-table :data="orderDetailData?.historyList" border style="width: 100%">
          <el-table-column prop="operateMan" label="操作者" />
          <el-table-column label="操作时间">
            <template #default="{ row }">
              {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态">
            <template #default="{ row }">
              {{ row.productQuantity === 1 ? "待付款" : row.productQuantity === 2 ? "已发货" : "已关闭" }}
            </template>
          </el-table-column>
          <el-table-column label="付款状态">
            <template #default="{ row }">
              {{ row.orderStatus === 2 ? "已支付" : "已退款" }}
            </template>
          </el-table-column>
          <el-table-column label="发货状态">
            <template #default="{ row }">
              {{ row.orderStatus === 0 ? "未发货" : "已发货" }}
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="note">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <!-- 备注订单弹出层 -->
  <RemarkOrderDlg :openVisiable="openVisiable" @closeVisiable="closeVisiable" :status="orderDetailData?.status"
    @getOrderDetail="getOrderDetail" />

  <!-- 关闭订单弹出层 -->
  <CloseOrderDlg :orderVisiable="orderVisiable" @closeOrderVisiable="closeOrderVisiable"
    @getOrderDetail="getOrderDetail" />
  <!-- 发送站内信息 -->
  <SendDlg :sendImportDlg="sendImportDlg" @closeSendDlg="closeSendDlg" />
  <!-- 修改费用信息 -->
  <UpdateMoneryDlg @closeUpdateMonetyInfo="closeUpdateMonetyInfo" :updateMoneryInfoParams="updateMoneryInfoParams"
    :updateMoneryInfoVis="updateMoneryInfoVis" @getOrderDetail="getOrderDetail" />
  <!-- 修改收货人信息 -->
  <UpdateRecevierInfo @closeUpdateRecevierInfo="closeUpdateRecevierInfo"
    :updateRecevierInfoVisable="updateRecevierInfoVisable" :RecevierInfo="RecevierInfo"
    @getOrderDetail="getOrderDetail" />
</template>

<script setup lang="ts">
import * as orderDetail from "@/request/oms_orderDetail"
import * as order from "@/request/order"
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
import { WarningFilled, Briefcase } from '@element-plus/icons-vue'
import RemarkOrderDlg from "./components/orderDetailNoteDlg.vue"
import CloseOrderDlg from "./components/closeOrderDlg.vue"
import SendDlg from "./components/sendImportDlg.vue"
import UpdateMoneryDlg from "./components/updateMoneryInfoDlg.vue"
import UpdateRecevierInfo from "./components/updateReceiverInfoDlg.vue"
const route = useRoute()
const router = useRouter()
const orderDetailData = ref<IOrderDetailResultModel>()
// 获取数据
const getOrderDetail = () => {
  const id = route.query.id
  orderDetail.getOrderDetailById(id as any).then(res => {
    if (res.code === 200) {
      orderDetailData.value = res.data
    }
  })
}
const productsTotal = computed(() => {
  return orderDetailData.value?.orderItemList.reduce((pre, cur) => {
    return pre + cur.productPrice * cur.productQuantity
  }, 0)
})
getOrderDetail()
// 修改收货人信息
const updateRecevierInfoVisable = ref(false)
const closeUpdateRecevierInfo = () => {
  updateRecevierInfoVisable.value = false
}
const openUpdateRecevierInfo = () => {
  updateRecevierInfoVisable.value = true
}
// 收货人信息
const RecevierInfo = computed(() => {
  return {
    orderId: route.query.id,
    receiverCity: orderDetailData.value?.receiverCity,
    receiverDetailAddress: orderDetailData.value?.receiverDetailAddress,
    receiverName: orderDetailData.value?.receiverName,
    receiverPhone: orderDetailData.value?.receiverPhone,
    receiverPostCode: orderDetailData.value?.receiverPostCode,
    receiverProvince: orderDetailData.value?.receiverProvince,
    receiverRegion: orderDetailData.value?.receiverRegion,
    status: orderDetailData.value?.status
  }
})
// 修改费用信息
const updateMoneryInfoVis = ref(false)
// 打开修改费用信息
const openUpdateMonetyInfo = () => {
  updateMoneryInfoVis.value = true
}
const closeUpdateMonetyInfo = () => {
  updateMoneryInfoVis.value = false
}
// 修改费用用到的信息
const updateMoneryInfoParams = computed(() => {
  return {
    payAmount: orderDetailData.value?.payAmount,
    promotionAmount: orderDetailData.value?.promotionAmount,
    integrationAmount: orderDetailData.value?.integrationAmount,
    totalAmount: orderDetailData.value?.totalAmount,
    discountAmount: orderDetailData.value?.discountAmount,
    freightAmount: orderDetailData.value?.freightAmount,
    orderId: route.query.id,
    status: orderDetailData.value?.status
  }
})
// 打开站内信息
const sendImportDlg = ref(false)
const openSendDlg = () => {
  sendImportDlg.value = true
}
const closeSendDlg = () => {
  sendImportDlg.value = false

}
// 打开关闭订单弹出层
const orderVisiable = ref(false)
const openCloseOrderVisiable = () => {
  orderVisiable.value = true
}
// 关闭关闭订单弹出层
const closeOrderVisiable = () => {
  orderVisiable.value = false
}
// 打开备注订单弹出框
const openVisiable = ref<boolean>(false);
// 关闭备注订单弹出框
const closeVisiable = () => {
  openVisiable.value = false
}
// 打开备注订单弹出框
const openVisiables = () => {
  openVisiable.value = true
}

// 删除订单
const deleteOrder = () => {
  ElMessageBox.confirm("您确定要删除该订单？", "删除提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const ids = route.query.id as string
    order.deleteOrder({ ids }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("删除成功")
      }
      router.go(-1)
    })
  }).catch(() => {
    ElMessage.success("已取消删除")
  })
}
</script>

<style lang="less" scoped>
.importants,
.returnPeoper,
.products,
.cost,
.caozuo {
  padding: 0 20px;
  margin-bottom: 20px;

}

.imgs {
  width: 80px;
  height: 80px;
}

.msg_top {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #f2f6fc;
  margin-bottom: 20px;
}

.left {
  display: flex;
  align-items: center;
  color: #f56c6c;
}

.price {
  color: #f40;
}

.right {
  width: 80%;
  display: flex;
  justify-content: end;
}
</style>